今天快速了解一下什麼是 Code Coverage，可以做什麼用。

什麼是 Code Coverage？

• 用百分比(%)表示目前專案的指定檔案中，程式碼有執行測試項目的涵蓋率。
• 透過這個指標，我們可以了解專案內：
  • 有多少程式碼已進一步進行測試，提高發現程式碼有誤的機會。
  • 重構的風險有多大：覆蓋率高可以作為重構不影響原本功能的信心指標。
  • 但不代表 Code Coverage 越高越好，要回到時間成本與核心功能整體評估，才是最具效益的做法。

Code Coverage 包含哪些項目？

• Branches coverage：程式碼中的 if-else switch-case 等每個程式碼片段有多少經過測試(%)。
• Function coverage：函式中的程式碼片段有多少經過測試(%)。
• Line coverage：有多少行程式碼經過測試(%)。
• Statement coverage：最基本的測試涵蓋率指標，表示程式碼執行到的測試涵蓋率。不管程式邏輯，只管每個程式碼是否有被執行測試(%)。
  
  圖片參考來源

執行 script

檢查 Code Coverage 會花比較多時間進行檢測，可以在 package.json 搭配 script，需要的時候執行：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "coverage": "yarn test --coverage --watchAll" // 執行所有頁面的測試覆蓋率檢查
  },

指定某些檔案的測試覆蓋率檢查執行腳本：
"coverage": "yarn test --coverage --watchAll --collectCoverageFrom=<檔案路徑>"
舉例：
"coverage": "yarn test --coverage --watchAll --collectCoverageFrom='src/components/**/*.{ts,tsx}'"

資料參考

• React Testing Tutorial - 14 - Code Coverage